<template>
    <!-- Form -->
    <el-dialog title="岗位设置" :visible.sync="dialogFormVisible" :modal-append-to-body="true"
               :append-to-body="true"
               :fullscreen="false" @close="close">

        <el-container style="height: 500px; border: 1px solid #eee;padding: 10px">
            <el-container style="padding: 10px;border-right: 1px solid #eee;">
                <el-header style="background-color: #f0f0f0;text-align: right">部门</el-header>
                <el-main>
                    <user-dept-position @loadNode="loadNode"
                                        @node-click="deptNodeClick"
                                        :showCheckboxModel="showCheckboxModel"></user-dept-position>
                </el-main>
            </el-container>
            <el-container style="padding: 10px;border-right: 1px solid #eee;">
                <el-header style="background-color: #f0f0f0;text-align: right">所属岗位</el-header>
                <el-main>
                    <menu-tree ref="pTree" style="padding: 10px" :showCheckboxModel="showPositionCheckboxModel"
                               :showNodeCheckbox="showNodeCheckboxModel"
                               :showHandle="showHandle" v-model="positionDataModel"
                               @node-click="positionNodeClick" @position-click="positionClick">
                        <el-button slot="handle" type="primary" icon="el-icon-refresh" style="margin-left: 10px"
                                   @click="handleRefresh"></el-button>
                    </menu-tree>
                </el-main>
            </el-container>
            <el-container style="padding: 10px">
                <el-header style="background-color: #f0f0f0;text-align: right">拥有权限</el-header>
                <el-main>
                    <menu-tree ref="mTree" style="padding: 10px" :showCheckboxModel="showCheckboxModel"
                               :showHandle="showCheckboxModel" v-model="menuDataModel"
                               @node-click="nodeClick" @append="append" @remove="remove" @edit="edit">
                        <el-button slot="handle" type="primary" icon="el-icon-refresh" style="margin-left: 10px"
                                   @click="handleRefresh"></el-button>
                    </menu-tree>
                </el-main>
            </el-container>
        </el-container>

        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>

            <el-button type="primary" @click="handleSubmit" :loading="loading">确 定</el-button>

        </div>
    </el-dialog>

</template>

<script>

    import MenuTree from "../menu/menu-tree";
    import UserDeptPosition from "./user-dept-position";


    export default {
        name: "user-position-dialog",
        components: {UserDeptPosition, MenuTree},
        model: {
            prop: 'isOpen',//指向props的参数名
            event: 'returnBack'//事件名称
        },
        beforeDestroy() {
        },
        props: {
            showNodeCheckbox: {
                type: Array
            },
            visible: {
                type: Boolean
            },
            isOpen: {
                type: Boolean
            },
            menuData: {
                type: Array
            },
            positionData: {
                type: Array
            }
        },

        data() {

            return {
                loading: false,
                positionDataModel: [],
                showNodeCheckboxModel: [],
                showHandle: false,
                positionShowCheckbox: true,
                showCheckboxModel: false,
                showPositionCheckboxModel: true,
                menuDataModel: [],
                dialogFormVisible: false,
                data: {
                    checkedKeys:[]
                },
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px'
            };
        },

        watch: {
            showNodeCheckbox(val){
                this.showNodeCheckboxModel=val
            },
            menuData(n, o) {
                this.menuDataModel = n;
            },
            positionData(n, o) {
                this.positionDataModel = n;
            },
            visible(val) {
                this.dialogFormVisible = val;
            }
        },
        methods: {

            positionClick(data) {
                this.data = data;

                this.$emit("position-click", data)
            },
            close() {
                this.dialogFormVisible = false;
                this.$emit('update:visible', false)
            },
            handleRefresh() {
                this.$emit('handleRefresh')
            },
            deptNodeClick(data) {
                this.$emit("deptNodeClick", data)
            },
            positionNodeClick(data) {
                this.$emit("positionNodeClick", data)
            },
            nodeClick(data) {
                this.$emit('nodeClick', data)
            },
            loadNode(node, resolve) {

                this.$emit('loadNode', node, resolve)
            },

            add() {
                this.$emit('add')
            },
            append(data) {
                this.$emit('append', data)
            },
            remove(node, data) {
                this.$emit('remove', node, data)
            },
            edit(data) {
                this.$emit('edit', data)
            },
            handleSubmit() {
                this.loading = true;

                this.$emit('handleSubmit', this.data, this.done)
            },
            done() {

                this.dialogFormVisible = false;
                this.loading = false;
            }
        }
    };
</script>

<style scoped>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }
</style>
